import React, { PureComponent } from 'react';
import moment from 'moment';
import { Button, Form, Input, Modal,  Divider,Card,Switch,Badge,message } from 'antd';
import {Map, Marker, NavigationControl,MapTypeControl,ScaleControl,OverviewMapControl, InfoWindow,TrafficLayer,Road} from 'react-bmap'  ;
import DescriptionList from '../../DescriptionList/index';
import MsgImage from '../MsgImage'
import styles from './index.less';
const FormItem = Form.Item;
const { TextArea } = Input;
const { Description } = DescriptionList;
message.config({
  top: 100,
  duration: 1.0,
});
//消息来源
const sourceMap = ['来自微信', '来自APP','平台发布'];
//是否审核
const auditMap = ["待审","已审待播","已审已播","导播忽略","主播忽略"];
//消息类型
const messageTypeMap = ['互动','寻人','寻物','车辆求助','寻找失主','其他'];

class MsgHuDongDetail extends PureComponent {
  state = {
    replayVisible: false,
    replayMessageValue:""
  };

  /**
   * 打开实时路况
   * @param checked
   */
  openShishiRold = (checked) => {
    checked == true ? alert("您打开了实时路况显示") : alert("您关闭了实时路况显示") ;
  }


  /**
   * 打开消息回复窗口
   * @param flag
   */
  handleShowReplayModal = (flag) => {
    this.setState({
      replayVisible: !!flag,
    });
  }

  handleReplayMessage = (helpId,userId) => {
    const replayMessageValue = this.state.replayMessageValue;
    if(replayMessageValue == undefined || replayMessageValue == ""){
      message.info("请输入回复消息内容");
      return ;
    }
    this.props.handleReplayMessage(helpId,userId,replayMessageValue);
    this.setState({
      replayVisible: false,
      replayMessageValue:""
    });
  }

  handleChangeReplayMessageValue = (e) => {
      this.setState({
        replayMessageValue: e.target.value,
      });
  }

  render() {
    const { replayVisible, replayMessageValue} = this.state;
    const {selectedRowData} = this.props;

    return (
      <div style={{height: "auto"}}>
        <Card bordered={false}>
          <DescriptionList style={{marginBottom: 16}} col={2}>
            <Description term="时间">{moment(selectedRowData.msgTime).format('YYYY-MM-DD HH:mm:ss')}</Description>
            <Description term="审核">
                  <span>{auditMap[selectedRowData.status]}</span>
                  <Button type="primary" style={{marginLeft: 40}} size="small"
                          onClick={() => this.handleShowReplayModal(true)}>回复消息
                  </Button>
            </Description>
            <Description term="类型">{messageTypeMap[selectedRowData.msgType]}</Description>
            <Description term="来源">{sourceMap[selectedRowData.messageFrom]}</Description>
          </DescriptionList>
          <Divider style={{marginBottom: 16}}/>
          <DescriptionList style={{marginBottom: 16}} col={2}>
            <Description term="路况位置和方向"></Description>
            <Description term="实时路况">
              <div>
                <Switch defaultChecked onChange={this.openShishiRold}/>
              </div>
              <div>
                <Badge status="error" text="拥堵"/>
                <Badge status="warning" text="缓行"/>
                <Badge status="success" text="通常"/>
              </div>
            </Description>
          </DescriptionList>
          <Card>
            {
              selectedRowData.positionCoor == null ? "" : (
                <Map center={{
                  lng: selectedRowData.positionCoor.split(",")[0],
                  lat: selectedRowData.positionCoor.split(",")[1]
                }} zoom="18">
                  <Marker position={{
                    lng: selectedRowData.positionCoor.split(",")[0],
                    lat: selectedRowData.positionCoor.split(",")[1]
                  }}/>
                  <NavigationControl/>
                  <MapTypeControl/>
                  <ScaleControl/>
                  <OverviewMapControl/>
                  <InfoWindow position={{
                    lng: selectedRowData.positionCoor.split(",")[0],
                    lat: selectedRowData.positionCoor.split(",")[1]
                  }} text={selectedRowData.positionName} title=""/>
                </Map>
              )
            }
          </Card>
        </Card>
        <Card bordered={false}>
          <Modal
            title="消息回复"
            visible={replayVisible}
            onOk={() => this.handleReplayMessage(selectedRowData.helpId,selectedRowData.userId)}
            onCancel={() => this.handleShowReplayModal(false)}
            okText="发送"
          >
            <FormItem
              labelCol={{span: 5}}
              wrapperCol={{span: 15}}
              label="描述"
            >
              <TextArea rows={5} placeholder="请输入" onChange={this.handleChangeReplayMessageValue}
                        value={replayMessageValue}/>
            </FormItem>
          </Modal>
        </Card>
      </div>
    );
  }
}

export default MsgHuDongDetail ;
